import React ,{useState,useEffect,useRef}from 'react'
import { Card, Col, Row,List,Avatar,Drawer  } from 'antd';
import { EditOutlined, EllipsisOutlined, PieChartOutlined } from '@ant-design/icons';
import axios from 'axios'
import * as echarts from 'echarts'
import _ from 'lodash'
const { Meta } = Card;
export default function Home() {
  const [viewList, setviewList] = useState([])
  const [starList, setstarList] = useState([])
  const [allList, setallList] = useState([])
  const [visible, setvisible] = useState(false)
  const [pieChart, setpieChart] = useState(null)
  const barRef = useRef()
  const pieRef = useRef()
  // 获取最多访问文章的数据
  useEffect(() => {
    axios.get('/news?publishState=2&_expand=category&_sort=view&_order=desc&_limit=6').then(res=>{
      setviewList(res.data)
    })
  }, [])
  // 获取最多点赞文章的数据
  useEffect(() => {
    axios.get('/news?publishState=2&_expand=category&_sort=star&_order=desc&_limit=6').then(res=>{
      setstarList(res.data)
    })
  }, [])
  // 柱状图的渲染
  const renderBarView = (barObj)=>{
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(barRef.current);
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '新闻分类图示'
      },
      tooltip: {},
      legend: {
        data: ['数量']
      },
      xAxis: {
        data: Object.keys(barObj),
        axisLabel:{
          rotate:'45',
          interval:0
        }
      },
      yAxis: {
        minInterval: 1
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: Object.values(barObj).map(item=>item.length)
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.onresize = ()=>{
      myChart.resize()
    }
  }
  // 柱状图数据
  useEffect(() => {
    axios.get('/news?publishState=2&_expand=category').then(res=>{
      let barObj = _.groupBy(res.data,item=>item.category.title);
      renderBarView(barObj)
      setallList(res.data)
    })
    return ()=>{
      window.onresize = null
    }
  }, [])
  // 饼状图的渲染
  const renderPieView = ()=>{
    // 饼状图数据
    let MyNewsList = allList.filter(item=>item.author === username)
    let groupObj = _.groupBy(MyNewsList,item=>item.category.title)
    let pieList = []
    for(let i in groupObj){
      pieList.push({
        name:i,
        value:groupObj[i].length
      })
    }
    var chartDom = pieRef.current;
    var myChart;
    if(!pieChart){
      myChart = echarts.init(chartDom);
      setpieChart(myChart)
    }else{
      myChart = pieChart
    }
    var option;

    option = {
      title: {
        text:`${username}用户的新闻分类图示`,
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '发布数量',
          type: 'pie',
          radius: '50%',
          data: pieList,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);

  }
  const {username,region,role:{roleName}} =JSON.parse(localStorage.getItem('token'))
  return (
    <div className="site-card-wrapper">
      <Row gutter={16}>
        <Col span={8}>
          <Card title="用户最常浏览" bordered={true}>
            <List
              size="small"
              dataSource={viewList}
              renderItem={item => <List.Item><a href={`#/news-manage/preview/${item.id}`}>{item.title}</a></List.Item>}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="用户点赞最多" bordered={true}>
            <List
              size="small"
              dataSource={starList}
              renderItem={item => <List.Item><a href={`#/news-manage/preview/${item.id}`}>{item.title}</a></List.Item>}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card
            cover={
              <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              />
            }
            actions={[
              <PieChartOutlined key="setting" onClick={()=>{
                setvisible(true);
                setTimeout(() => {
                  renderPieView()
                },0);
              }} />,
              <EditOutlined key="edit" />,
              <EllipsisOutlined key="ellipsis" />,
            ]}
          >
            <Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title={username}
              description={
                <div>
                  <b>{region?region:'全球'}</b>
                  <span style={{paddingLeft:'20px'}}>{roleName}</span>
                </div>
              }
            />
          </Card>
        </Col>
      </Row>
      <Drawer 
        width='600px'
        title="个人新闻分类" 
        placement="right" 
        onClose={()=>{setvisible(false)}} 
        visible={visible}>
        <div ref={pieRef} style={{width: '100%',height:'800px',marginTop:'30px'}}></div>
      </Drawer>
      <div ref={barRef} style={{width: '100%',height:'400px',marginTop:'30px'}}></div>
    </div>
  )
}
